<template>
  <div class="wrap">
    <!--suppress HtmlUnknownTarget -->
    <img class="img" v-if="image" :src='image' alt="" draggable="false"/>
    <div :class="['content', direction === 'LEFT' ? 'content-left' : 'content-right']">
      <span class="title" v-if="subTitle">{{subTitle}}</span>
      <span class="description" v-if="title">{{title}}</span>
      <xum-button class="btn" @click="show" v-if="linkGoodId">Shop Now</xum-button>
    </div>
  </div>
</template>

<script>
import XumButton from '@/components/general/XumButton'

export default {
  name: 'GoodBox1',
  components: {
    'xum-button': XumButton
  },
  props: {
    linkGoodId: {
      type: [String, Number],
      required: false,
      default: 0
    },
    image: {
      type: String,
      required: false,
      default: ''
    },
    subTitle: {
      type: String,
      required: false,
      default: ''
    },
    title: {
      type: String,
      required: false,
      default: ''
    },
    direction: {
      type: String,
      required: false,
      default: 'RIGHT'
    },
    clickEnable: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data: () => {
    return {
    }
  },
  methods: {
    show () {
      if (this.clickEnable && this.linkGoodId) {
        this.$router.push('/shopDetail/' + this.linkGoodId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

  $time:.6s;

  .wrap:hover{

    .content{
      bottom: 20px;
      transition: $time;

      .description{
        color: #ff7353;
        transition: $time;
      }

      .btn{
        opacity: 1;
        transition: $time;
      }

    }
  }

  .wrap{
    width: 100%;
    position: relative;
    user-select: none;

    .img{
      width: 100%;
      height: 100%;
    }

    .content{
      transition: $time;
      width: 80%;
      position: absolute;
      bottom: 0;
      padding: 0 30px 0;

      span{
        display: block;
        margin-bottom: 8px;
      }

      .title{
        font-size: 12px;
        font-weight: 400;
        color: rgb(85,85,85);
      }

      .description{
        font-size: 24px;
        font-weight: 700;
        color: black;
        transition: $time;
      }

      .btn{
        margin-top:10px;
        opacity: 0;
        transition: $time;
      }

    }

    .content-left{
      left: 0;
      text-align: left;
    }

    .content-right{
      right: 0;
      text-align: right;
    }

  }
</style>
